<template>
	<view>
		<up-popup :show="is_open" @close="close" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
			<view class="public-popup-2 px-50 py-20 fc" style="width: 670rpx;position: relative;">
				<view class="fs-36">
					发现新版本
				</view>
				<view class="mt-80" style="max-height: 400rpx;overflow: scroll;line-height: 1.8;">
					<view class="fs-32 color">
						新版本-V{{update_title}}
					</view>
					<view class="mt-30" style="opacity: 0.7;">
						{{update_des}}
					</view>
				</view>
				<view v-if="!is_update" @click="goUpdate" class="public-btn-3 transition py-25 t-c mt-auto mb-60">
					<view class="text-color-b fs-32">
						立即更新
					</view>
				</view>
				<view v-else class="fc-ac mt-auto mb-60">
					<view class="fr-ac w-100">
						<view class="mr-20 ml-auto color fs-32">
							{{prpgress_num}}%
						</view>
						<view class="color fs-32">
							更新中...
						</view>
					</view>
					<view class="mt-20">
						<cut-corner :arrow="3" clipSize="10rpx">
						<cut-corner :arrow="1" clipSize="10rpx">
						<view class="px-2 py-2" style="width: 580rpx;height: 30rpx;background-color: #66E9FF;">
							<cut-corner :arrow="3" clipSize="10rpx" width="100%" height="100%">
							<cut-corner :arrow="1" clipSize="10rpx" width="100%" height="100%">
							<view class="px-6 py-6 w-100 h-100" style="background-color: #1C4C5A;">
								<cut-corner :arrow="3" clipSize="8rpx" width="100%" height="100%">
								<cut-corner :arrow="1" clipSize="8rpx" width="100%" height="100%">
								<view :style="{'width': prpgress_num + '%'}" class="h-100" style="background-color: #66E9FF;">
									
								</view>
								</cut-corner>
								</cut-corner>
							</view>
							</cut-corner>
							</cut-corner>
						</view>
						</cut-corner>
						</cut-corner>
						
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script>
	import {
		getAppUpdate
	} from '@/utils/request/api'
	export default {
		props: {
			//是否显示
			show: {
				default: true,
				type:Boolean
			},
		},
		data() {
			return {
				is_open: false,
				
				prpgress_num: 0,
				download_num_ed: 0, //已经下载数
				download_num: 0, //总下载数
				is_update: false,   // 是否在下载
				update_type: 1,   //1整包更新 2热更新
				update_url: '',    //下载地址
				is_update_app: false,
				update_title: '1.0.0',
				update_des:'版本更新~',
				is_forced_update: true,
				// version:''
			};
		},
		mounted() {
			this.getAppUpdate()
		},
		methods: {
			async getAppUpdate(){
				const res = await getAppUpdate({
					version_type: uni.getSystemInfoSync().platform //android或者ios
				})
				console.log('APP更新======',res)
				var sys = await uni.getSystemInfoSync()
				console.log('***********getSystemInfoSync',sys);
				this.is_open = res.is_open == 1?true:false
				
				this.update_des = res.content
				this.update_type = res.update_type
				
				if(this.update_type==1 && sys.appVersionCode < res.version){
					if(!this.is_open){
						this.is_update_app = false
						return
					}
					
					this.update_url =res.version_url //更新的地址
					this.is_update_app = true ///是否强制更新，不能关闭
					this.update_title = res.version_str   //版本号
					return false
				}
				var appWgtVersion = '1.0.0'
				if(sys.appWgtVersion){
					appWgtVersion = sys.appWgtVersion
				}
				if(this.update_type==2 && appWgtVersion != res.version_str){
					if(!this.is_open){
						this.is_update_app = false
						return
					}
					
					
					this.update_url =res.version_url //更新的地址
					this.is_update_app = true ///是否强制更新，不能关闭
					this.update_title = res.version_str   //版本号
					return false
				}
				
			},
			close(){
				this.is_open = false
				this.$emit('close')
			},
			empty(){
				this.$emit('empty')
			},
			cancel(){
				this.$emit('cancel')
			},
			
			noUpdate(){
				this.is_update_app = false
			},
			//确定更新
			goUpdate(){
				this.is_update = true
				//下载更新文件
				console.log(this.update_url);
				const downloadTask = uni.downloadFile({
					url: this.update_url,
					success: res => { 
						console.log(res)
						if (res.statusCode == 200) {
							this.installBtn(res.tempFilePath);
							return;
						}else{
							this.showToast('下载失败...')
							this.is_update_app = false
							this.is_update = false
						}
					},
					fail: (err) => {
						this.showToast('下载失败...')
						this.is_update_app = false
						this.is_update = false
					}
				});
				downloadTask.onProgressUpdate(res => {
					this.prpgress_num = res.progress;
					this.download_num_ed = (res.totalBytesWritten / Math.pow(1024.00, 2)).toFixed(2);
					this.download_num = (res.totalBytesExpectedToWrite / Math.pow(1024.00, 2)).toFixed(2);
				});
			},
			
			//点击安装
			installBtn: function(path) {
				plus.runtime.install(path, {
					force: true
				}, res => {
					//更新完重启app
					if (this.is_forced_update) {
						//更新完重启app
						plus.runtime.restart();
						return;
					}
					uni.showModal({
						title: '安装成功是否重启？',
						success: res => {
							if (res.confirm) {
								//更新完重启app
								plus.runtime.restart();
							}
						}
					})
				}, err => {
					//重置更新的参数
					this.prpgress_num = 0
					this.download_num_ed = 0
					this.download_num = 0
					this.is_update = false
					uni.showModal({
						title: '更新失败',
						content: err.message,
						showCancel: false,
						success: res => {}
					});
			
				});
			},
			
			//取消更新
			closeUpdate: function() {
				if (parseFloat(this.download_num_ed) > 0) {
					return this.showToast('升级中，请勿关闭~');
				}
			
				// this.$emit('updateClose', {})
				this.is_update_app =false
			},
			
			showToast(title, time = 3000) {
				// 提示框
				setTimeout(() => {
					uni.showToast({
						title: title,
						icon: 'none',
						duration: time,
						success: (res) => {
							console.log(res);
						},
						fail: (err) => {
							console.log(err);
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.popupPicker{
		// border-radius: 20px 20px 0 0;
		box-sizing: border-box;
		padding: 30rpx 40rpx;
	}
	.empty{
		height: 80rpx;
		background: var(--color);
		border-radius: 40rpx;
		font-size: 32rpx;
		color: #fff;
		border: 1px solid var(--color);
	}
	.cancel{
		height: 80rpx;
		background: #fff;
		border-radius: 40rpx;
		font-size: 32rpx;
		color: #000;
		border: 1px solid #B8B8B8;
	}
</style>